<template>
  <div class="app-container">
    <!--        搜索框-->
    <div>
      <el-form ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="消息标题">
          <el-input
            v-model="queryParam.messageTitle"
            placeholder="请输入消息标题"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="发布人员">
          <el-input
            v-model="queryParam.creatUserName"
            placeholder="请输入发布人员"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="queryParam.type"
            placeholder="消息类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--        消息列表-->
    <div class="container">
      <el-tabs v-model="message">
        <!--              未读消息-->
        <el-tab-pane :label="`未读消息(${pages.unread.total})`" name="first">
          <el-table
            :data="unread"
            :show-header="true"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="标题" width="300px">
              <template slot-scope="scope">
                <span class="message-title">
                  {{ scope.row.messageTitle }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column
              label="日期"
              prop="date"
              width="180"
            ></el-table-column>

            <el-table-column label="操作" width="240px" align="center">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-check"
                  size="mini"
                  type="primary"
                  plain
                  @click="handleReadOne(scope.row)"
                >
                  标为已读
                </el-button>
                <el-button
                  icon="el-icon-document"
                  size="mini"
                  type="primary"
                  plain
                  @click="openMessage(scope.row)"
                >
                  打开消息
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :page-sizes="[1, 5, 10, 20, 30, 50, 100]"
            :page-size.sync="pages.unread.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.unread.total"
            :current-page.sync="pages.unread.page"
            align="right"
            @size-change="handleQuery"
            @current-change="handleQuery"
            @prev-click="handleQuery"
            @next-click="handleQuery"
          ></el-pagination>
          <div class="handle-row">
            <el-button
              icon="el-icon-check"
              :disabled="queryParam.readIDs.length == 0"
              type="primary"
              @click="handleRead"
            >
              全部标为已读
            </el-button>
          </div>
        </el-tab-pane>
        <!--              已读消息-->
        <el-tab-pane :label="`已读消息(${pages.read.total})`" name="second">
          <template v-if="message === 'second'">
            <el-table
              :data="read"
              :show-header="true"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column label="标题" width="300px">
                <template slot-scope="scope">
                  <span class="message-title">
                    {{ scope.row.messageTitle }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="描述"
                prop="description"
              ></el-table-column>
              <el-table-column
                label="日期"
                prop="date"
                width="180"
              ></el-table-column>

              <el-table-column label="操作" width="240px" align="center">
                <template slot-scope="scope">
                  <cus-del-btn
                    btn-content="删除消息"
                    @ok="handleDelOne(scope.row)"
                  />
                  <el-button
                    icon="el-icon-document"
                    size="mini"
                    type="primary"
                    plain
                    @click="openMessage(scope.row)"
                  >
                    打开消息
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              :page-sizes="[1, 5, 10, 20, 30, 50, 100]"
              :page-size.sync="pages.read.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pages.read.total"
              :current-page.sync="pages.read.page"
              align="right"
              @size-change="handleQuery"
              @current-change="handleQuery"
              @prev-click="handleQuery"
              @next-click="handleQuery"
            ></el-pagination>
            <div class="handle-row">
              <el-button icon="el-icon-delete" type="danger" @click="handleDel">
                删除全部
              </el-button>
            </div>
          </template>
        </el-tab-pane>

        <!--              回收站-->
        <el-tab-pane :label="`回收站(${pages.recycle.total})`" name="third">
          <template v-if="message === 'third'">
            <el-table
              :data="recycle"
              :show-header="true"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column label="标题" width="300px">
                <template slot-scope="scope">
                  <span class="message-title">
                    {{ scope.row.messageTitle }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="描述"
                prop="description"
              ></el-table-column>
              <el-table-column
                label="日期"
                prop="date"
                width="180"
              ></el-table-column>

              <el-table-column label="操作" width="240px" align="center">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-refresh-left"
                    type="primary"
                    size="mini"
                    plain
                    @click="handleRestoreOne(scope.row)"
                  >
                    还原消息
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              :page-sizes="[1, 5, 10, 20, 30, 50, 100]"
              :page-size.sync="pages.recycle.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pages.recycle.total"
              :current-page.sync="pages.recycle.page"
              align="right"
              @size-change="handleQuery"
              @current-change="handleQuery"
              @prev-click="handleQuery"
              @next-click="handleQuery"
            ></el-pagination>
            <div class="handle-row">
              <el-button
                icon="el-icon-refresh-left"
                type="primary"
                @click="handleRestore"
              >
                全部还原
              </el-button>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--        模态框-->
    <div class="dia">
      <el-dialog :visible.sync="open" width="800px">
        <template slot="title">
          <div class="titleZise">
            <svg-icon icon-class="message-list-add" />
            <span>{{ opendMessage.messageTitle }}</span>
          </div>
        </template>
        <el-form style="color: #1f2d3d">
          <el-form-item>
            <el-input :value="opendMessage.messageTitle" readonly>
              <template slot="prepend">标&nbsp;&nbsp;&nbsp;&nbsp;题</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input :value="opendMessage.type" readonly>
              <template slot="prepend">类&nbsp;&nbsp;&nbsp;&nbsp;型</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input :value="opendMessage.date" readonly>
              <template slot="prepend">日&nbsp;&nbsp;&nbsp;&nbsp;期</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input :value="opendMessage.creatUserName" readonly>
              <template slot="prepend">创建人</template>
            </el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              readonly
              rows="10"
              :value="opendMessage.content"
              type="textarea"
              autosize
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmMessage">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getAction, deleteAction } from '@/api/action'
  import { BaseListMixin } from '@/mixins/BaseListMixin'

  export default {
    name: 'MessageList',
    mixins: [BaseListMixin],
    data() {
      return {
        title: '消息列表',
        message: 'first',
        showHeader: false,
        queryParam: {
          id: this.$store.state.user.id,
          userName: this.$store.state.user.name,
          messageTitle: '',
          creatUserName: '',
          type: 'all',
          readIDs: [],
          page: 1,
          limit: 5,
          total: 0,
        },
        pages: {
          unread: { limit: 10, total: 0 },
          read: { limit: 10, total: 0 },
          recycle: { limit: 10, total: 0 },
        },
        target: null,
        opendMessage: {},
        open: false,
        unread: [],
        read: [],
        recycle: [],
        url: {
          listPage: '/presoftasim/clusterMonitor/messageList/unread',
          unreadList: '/presoftasim/clusterMonitor/messageList/unread',
          readList: '/presoftasim/clusterMonitor/messageList/read',
          recycleList: '/presoftasim/clusterMonitor/messageList/recycle',
          readMessage: '/presoftasim/clusterMonitor/messageList/handleread',
          delMessage: '/presoftasim/clusterMonitor/messageList/handledel',
          restoreMessage: '/presoftasim/clusterMonitor/messageList/restore',
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 公告表格数据
        noticeList: [],
        // 类型数据字典
        statusOptions: [],
        // 状态数据字典
        typeOptions: [
          { dictValue: 'all', dictLabel: '全部' },
          {
            dictValue: 'notice',
            dictLabel: '通知',
          },
          { dictValue: 'announcement', dictLabel: '公告' },
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeTitle: undefined,
          createBy: undefined,
          status: undefined,
          noticeType: 0,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          noticeTitle: [
            { required: true, message: '公告标题不能为空', trigger: 'blur' },
          ],
          noticeType: [
            { required: true, message: '公告类型不能为空', trigger: 'blur' },
          ],
        },
        modelIcon: {
          //模态框图标
          create: 'el-icon-document-add',
          update: 'el-icon-edit-outline',
          detail: 'el-icon-document-copy',
        },
      }
    },
    computed: {
      unreadNum() {
        return this.unread.length
      },
    },
    mounted() {
      this.defaultOpen()
      this.handleQuery()
      // this.getUnreadList();
      // this.getReadList();
      // this.getRecycleList();
    },
    methods: {
      //执行批量标为已读操作
      handleRead() {
        getAction(this.url.readMessage, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.$store.state.user.handleread = !this.$store.state.user
              .handleread
            this.listLoading = false
            this.getUnreadList()
            this.getReadList()
            this.getRecycleList()
          } else {
            this.submitFail(res.message)
          }
        })
      },
      //执行单个标为已读操作
      handleReadOne(row) {
        this.queryParam.readIDs = []
        this.queryParam.readIDs[0] = row.id
        this.handleRead()
      },
      //执行批量删除操作
      handleDel() {
        deleteAction(this.url.delMessage, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.getUnreadList()
            this.getReadList()
            this.getRecycleList()
          } else {
            this.submitFail(res.message)
          }
        })
      },
      //执行单个删除操作
      handleDelOne(row) {
        this.queryParam.readIDs = []
        this.queryParam.readIDs[0] = row.id
        this.handleDel()
      },
      //还原消息
      handleRestore() {
        getAction(this.url.restoreMessage, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.getUnreadList()
            this.getReadList()
            this.getRecycleList()
          } else {
            this.submitFail(res.message)
          }
        })
      },
      //还原单个消息
      handleRestoreOne(row) {
        this.queryParam.readIDs = []
        this.queryParam.readIDs[0] = row.id
        this.handleRestore()
      },
      //执行查询
      handleQuery() {
        this.getUnreadList()
        this.getReadList()
        this.getRecycleList()
      },
      //重置表单
      resetQuery() {
        this.queryParam.type = 'all'
        this.queryParam.messageTitle = ''
        this.queryParam.creatUserName = ''
      },
      //获取跳转地址传递的参数
      getTaregt: function () {
        if (this.$route.query.messageID != -1) {
          this.target = this.$route.query.messageID
        }
      },
      //打开消息详情模态框
      openMessage: function (row) {
        console.log(row)
        for (let i in this.unread) {
          if (row.id == this.unread[i].id) {
            this.opendMessage = this.unread[i]
          }
        }
        for (let i in this.read) {
          if (row.id == this.read[i].id) {
            this.opendMessage = this.read[i]
          }
        }
        this.open = true
      },
      //确认消息关闭模态框
      confirmMessage: function () {
        this.open = false
      },
      //关闭模态框
      cancel: function () {
        this.open = false
      },
      //  默认打开模态框
      defaultOpen: function () {
        this.getTaregt()
        if (this.target != -1 && this.target != null) {
          getAction(this.url.unreadList, this.queryParam).then((res) => {
            if (res.code == 200) {
              this.listLoading = false
              this.unread = res.data.records
              for (let i in this.unread) {
                if (this.target == this.unread[i].id) {
                  this.openMessage(this.unread[i])
                }
              }
            } else {
              this.submitFail(res.message)
            }
          })
        }
      },
      //表格多选框
      handleSelectionChange: function (val) {
        this.queryParam.readIDs = []
        for (let i in val) {
          this.queryParam.readIDs[i] = val[i].id
        }
      },
      //获取消息列表
      getUnreadList: function () {
        this.queryParam.limit = this.pages.unread.limit
        this.queryParam.total = this.pages.unread.total
        this.queryParam.page = this.pages.unread.page
        getAction(this.url.unreadList, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.unread = res.data.records
            this.pages.unread.total = res.data.total
            this.pages.unread.page = res.data.current
            this.pages.unread.limit = res.data.size
          } else {
            this.submitFail(res.message)
          }
        })
      },
      getReadList: function () {
        this.queryParam.limit = this.pages.read.limit
        this.queryParam.total = this.pages.read.total
        this.queryParam.page = this.pages.read.page
        getAction(this.url.readList, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.read = res.data.records
            this.pages.read.total = res.data.total
            this.pages.read.page = res.data.current
            this.pages.read.limit = res.data.size
          } else {
            this.submitFail(res.message)
          }
        })
      },
      getRecycleList: function () {
        this.queryParam.limit = this.pages.read.limit
        this.queryParam.total = this.pages.read.total
        this.queryParam.page = this.pages.read.page
        getAction(this.url.recycleList, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.recycle = res.data.records
            this.pages.recycle.total = res.data.total
            this.pages.recycle.page = res.data.current
            this.pages.recycle.limit = res.data.size
          } else {
            this.submitFail(res.message)
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
</style>
